<template>
  <div class="modal"
       v-if="showDialog" :requestFocus="true">
    <div id="customer_notice_root">
      <div class="notice_agree" :gradientBackground="{colors:['#252930','#2F3541'],orientation: 0, cornerRadius: 8}">
        <span class="span_title" :focusable="false">{{noticeTitle}}</span>
        <span class="span_content" :focusable="false">{{noticeContent}}</span>
        <span v-if="regNumber.length>2" class="span_regNumber" :focusable="false">备案号：{{regNumber}}</span>
        <div class="notice_link" style="margin-bottom: 20px" >
          <div v-for="(item,index) in noticeLink" :key="item.name"
               :focusable="true"
               :clipChildren="false"
               class="single_link"
               @click="read(index)">
            <span class="span_link_left">《</span>
            <span class="span_link" :duplicateParentState="true" >{{item.name}}</span>
            <span class="span_link_right">》</span>
          </div>
        </div>
        <div class="notice_link" :duplicateParentState="true">
          <div class="span_confirm" v-for="(item,index) in noticeConfirm" :key="item.name"
               :focusable="true"
               :clipChildren="false"
               @click="confirm(index)">
            <span class="txt" :duplicateParentState="true" :focusable="false">{{item.name}}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { __CONFIG__, getAgreementKey } from './config/global';
const {useESRouter} = require("@extscreen/es3-router");
import {defineComponent, onMounted,ref} from "vue";
import {useESToast} from '@extscreen/es3-core';

export default defineComponent({
  name: 'CustomerNotice',
  setup(props,{emit}){
    const viewRef=ref()
    const router = useESRouter()
    const showDialog=ref(false)
    var toast = useESToast();
    const noticeTitle='温馨提示'
    const noticeContent='亲爱的用户, 在您使用'+__CONFIG__.esAppName+'前请阅读《'+__CONFIG__.esAppName+'用户协议》和《'+__CONFIG__.esAppName+'隐私政策》经过您同意后, 我们才能向您提供相关服务哦~'
    const regNumber= __CONFIG__.regNumber+" "+__CONFIG__.IndRegNumber
    const noticeConfirm= [
      {
        name: '同意',
        value: '1'
      },
      {
        name: '不同意',
        value: '2'
      }
    ]
    const noticeLink= [
      {
        name: __CONFIG__.esAppName+'用户协议',
        value: '1',
      },
      {
        name: __CONFIG__.esAppName+'隐私政策',
        value: '2'
      }
    ]
    function onClose(evt) {
      evt.stopPropagation();
    }
    const show=()=>{
      showDialog.value = true
    }
    function dismiss(){
      showDialog.value = false
    }
    function read(index) { // 不同协议跳转
      let params;
      let agreementUrl = __CONFIG__.agreeUrl
      switch (index){
        case 0:
          params = {
            html:agreementUrl + __CONFIG__.packageName
          }
          break;
        case 1:
          params = {
            html:agreementUrl + __CONFIG__.packageName+"&default=privacy_agreement"
          }
          break;
      }
      router.push({
        name: 'load_web_view',
        params:params
      })
    }

    function confirm(index) { // 同意/不同意跳转
      switch(index){
        case 0://同意
          try {
            const key = getAgreementKey()
            localStorage.setItem(key,"1")
            emit('onAgreeClick')
            dismiss()
          }catch (e) {
          }
          break;
        case 1://不同意
          try {
            const key1 = getAgreementKey()
            localStorage.removeItem(key1)
            setTimeout(()=>{router.back()},500)
          }catch (e) {

          }

          break;
      }
    }
    return {
      showDialog,
      noticeTitle,
      noticeContent,
      noticeConfirm,
      noticeLink,
      onClose,
      show,
      dismiss,
      read,
      confirm,
      viewRef,
      regNumber
    }
  }
})

</script>

<style>
#customer_notice_root {
  display: flex;
  flex: 1;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 1920px;
  height: 1080px;
  background-color: rgba(0,0,0,0.9);
}
.notice_agree {
  width: 1200px;
  height: 690px;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.span_title {
  width: 1200px;
  height: 60px;
  margin-top: 70px;
  font-size: 40px;
  font-weight: 500;
  color: #ffffff;
  text-align: center;
  background-color: transparent;
}
.span_content {
  padding-left: 100px;
  padding-right: 100px;
  width: 1200px;
  height: 100px;
  margin-top: 50px;
  font-size: 32px;
  font-weight: 400;
  color: #FFFFFF;
  line-height: 40px;
  background-color: transparent;
}
.span_regNumber{
  padding-left: 100px;
  padding-right: 100px;
  width: 1200px;
  height: 32px;
  margin-top: 10px;
  font-size: 30px;
  font-weight: 400;
  color: #FFFFFF;
  line-height: 32px;
  background-color: transparent;
}

.notice_link {
  width: 1200px;
  height: 80px;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  margin-top: 60px;
  background-color: transparent;
}
.single_link {
  margin-right: 9px;
  margin-left: 9px;
  height: 70px;
  focus-background-color: #ffffff;
  border-radius: 44px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.span_link_left{
  color: #FF5415;
  font-size: 36px;
  padding-left: 18px;
}
.span_link {
  color: #FF5415;
  font-size: 36px;
  text-decoration:underline;
}
.span_link_right{
  color: #FF5415;
  font-size: 36px;
  padding-right: 18px;
}
.span_confirm {
  width: 260px;
  height: 80px;
  border-radius: 44px;
  background-color: rgba(255,255,255,0.1);
  justify-content: center;
  align-items: center;
  margin-right: 25px;
  margin-left: 25px;
  focus-background-color: #ffffff;
}
.txt {
  color: rgba(255,255,255,0.7);
  font-size: 36px;
  text-align: center;
  focus-color: #000000;
}
.modal{
  z-index: 10000;
  width: 1920px;
  height: 1080px;
}
</style>
